<template>
  <el-dialog
    title="参数列表"
    append-to-body
    :visible.sync="dataSetParameterValue.dialogVisible">
    <el-button size="mini" plain style="margin: 10px 0px;" @click="addDataSetParam()">添加参数</el-button>
    <el-table :data="dataSetParameterValue.parameters" size="mini" style="width: 100%">
      <el-table-column prop="name" label="参数名称" :show-overflow-tooltip="true" />
      <el-table-column prop="type" label="数据类型" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ dic[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column prop="defaultValue" label="默认值" :show-overflow-tooltip="true" />
      <el-table-column header-align="center" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editDataSetParam(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="removeDataSetParam(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-dialog
        title="参数配置"
        append-to-body
        :visible.sync="dialogVisible"
        width="400px"
      >
      <el-form label-width="85px" label-position="left" ref="datasetParamRuleForm" :rules="rules"  size="small" :model="dataSetParameter">
        <el-form-item label="参数名称:" prop="name">
          <el-input v-model="dataSetParameter.name" />
        </el-form-item>
        <el-form-item label="数据类型:">
          <el-select v-model="dataSetParameter.type" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in paramTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="默认值:">
          <el-input v-model="dataSetParameter.defaultValue" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="saveDataSetParam()">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>
<script>
export default {
  props: {
    dataSetParameterValue: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      edit: false,
      dialogVisible: false,
      dic: {
        String: '字符串',
        Integer: '整数',
        Float: '小数',
        Boolean: '布尔值',
        Date: '时间',
        List: '列表'
      },
      paramTypeOptions: [{
        value: 'String',
        label: '字符串'
      },
      {
        value: 'Integer',
        label: '整数'
      },
      {
        value: 'Float',
        label: '小数'
      },
      {
        value: 'Boolean',
        label: '布尔值'
      },
      {
        value: 'Date',
        label: '时间'
      },
      {
        value: 'List',
        label: '列表'
      }
      ],
      oldName: '',
      dataSetParameter: {
        name: '',
        type: 'String',
        defaultValue: '',
        lock: false
      },
      rules: {
        name:[{ required: true, message: '请输入参数名称', trigger: 'blur' }]
      }
    }
  },
  mounted: function() {

  },
  methods: {
    addDataSetParam() {
      this.edit = false
      this.dataSetParameter = {
        name: '',
        type: 'String',
        defaultValue: '',
        lock: false
      }
      this.dialogVisible = true
    },
    editDataSetParam(row) {
      this.edit = true
      this.oldName = row.name
      this.dataSetParameter = {
        name: row.name,
        type: row.type,
        defaultValue: row.defaultValue,
        lock: row.lock
      }
      this.dialogVisible = true
    },
    removeDataSetParam(row) {

    },
    saveDataSetParam() {
      this.$refs.datasetParamRuleForm.validate((valid) => {
        if (valid) {
          const parameters = this.dataSetParameterValue.parameters
          const edit = this.edit
          const name = this.dataSetParameter.name
          const obj = parameters.find(ele => { return ele.name === name })
          if (edit) {
            if (obj.name !== this.oldName) {
              this.$message.error('参数名称已存在')
              return
            }
            const index = parameters.indexOf(obj)
            parameters.splice(index, 1, this.dataSetParameter)
          } else {
            if (obj) {
              this.$message.error('参数名称已存在')
              return
            }
            parameters.push(this.dataSetParameter)
          }
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style>

</style>
